<template>
    <view class="input" @click="popup.open()">
        <view class="content" v-if="model.checked.length">
            <view class="item" v-for="tag in model.checked" @click.stop="">
                <view>{{tag.text}}</view>
                <uni-icons type="closeempty" @click="hdChecked(tag)"></uni-icons>
            </view>
        </view>
        <view class="content placeholder" v-else>{{placeholder}}</view>
        <uni-icons class="icon" :type="model.popupVisible?'top':'bottom'"></uni-icons>
    </view>
    <uni-popup ref="popup" background-color="rgba(255,255,255,0)" :is-mask-click="false" type="bottom"
        @change="chgPopup">
        <view class="popup">
            <view class="header">
                <view class="cancel flex-1" @click="cancel">关闭</view>
                <view class="flex-3">请选择</view>
                <view class="confirm flex-1" @click="confirm">确定</view>
            </view>
            <scroll-view class="scroll" scroll-y @scrolltolower="hdReachBottom">
                <view class="content" v-for="item in data" @click="hdChecked(item)">
                    <view class="flex-1"></view>
                    <view class="flex-3 text-center" :class="{'active':modelValue.includes(item.value || '')}">
                        {{item.text || ''}}
                    </view>
                    <uni-icons class="flex-1" type="checkmarkempty" color="#33aafc"
                        v-if="modelValue.includes(item.value || '')" />
                    <view class="flex-1" v-else></view>
                </view>
            </scroll-view>
        </view>
    </uni-popup>
</template>

<script lang="ts" setup>
    import { reactive, ref, onMounted, watch } from 'vue'

    const emit = defineEmits(['update:modelValue', 'cancel', 'confirm', 'close', 'reachBottom'])
    const props = defineProps({
        modelValue: {
            type: Array,
            default() {
                return []
            }
        },
        value: {
            type: Array,
            default() {
                return []
            }
        },
        field: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        data: {
            type: Array,
            default: []
        }
    })

    const popup = ref()
    const model = reactive({
        checked: [],
        popupVisible: false,
        init: true
    })

    const hdChecked = data => {
        const i = model.checked.findIndex(it => it.value == data.value)
        if (i === -1) {
            model.checked.push(data)
        } else {
            model.checked.splice(i, 1)
        }
        props.modelValue.splice(0, props.modelValue.length, ...model.checked.map(it => it.value))
        emit('update:modelValue', props.modelValue)
    }

    const hdReachBottom = () => {
        emit('reachBottom')
    }

    const chgPopup = event => {
        model.popupVisible = event.show
    }

    const cancel = () => {
        popup.value.close()
        emit('cancel')
        emit('close')
    }

    const confirm = () => {
        popup.value.close()
        emit('confirm')
        emit('close')
    }
    const clear = () => {
        model.checked = []
        props.modelValue.splice(0, props.modelValue.length)
        emit('update:modelValue', props.modelValue)
    }

    watch(() => props.data, (n, o) => {
        if (model.init) {
            if (props.value?.length) {
                if (!n?.length) return
                model.checked.splice(0, model.checked.length, ...props.value)
                props.modelValue.splice(0, props.modelValue.length, ...model.checked.map(it => it.value))
                emit('update:modelValue', props.modelValue)
                return model.init = false
            }
            model.init = false
        }
        if (!n?.length) {
            clear()
        }
    })

    onMounted(() => {
        // model.checked.splice(0, model.checked.length, ...props.value)
        // props.modelValue.splice(0, props.modelValue.length, ...model.checked.map(it => it.value))
    })

// defineExpose({
// })
</script>

<style lang="scss" scoped>
    .active {
        color: #33aafc;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-3 {
        flex: 3;
    }

    .text-center {
        text-align: center;
    }

    .input {
        position: relative;

        & .content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            border: 1px solid #dcdfe6;
            padding: 20rpx;
            border-radius: 8rpx;

            & .item {
                display: flex;
                align-items: center;
                margin: 0 10rpx 10rpx 0;
                background: #dcdcdc;
                padding: 10rpx;
            }
        }

        & .placeholder {
            color: #808080;
        }

        & .icon {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
        }
    }

    .popup {
        background: #fff;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        padding: 10px 10rpx 50rpx 10rpx;

        & .header {
            display: flex;
            align-items: center;
            text-align: center;
            font-size: 28rpx;
            margin-bottom: 20rpx;

            & .cancel {
                color: #999;
            }

            & .confirm {
                color: #007aff;
            }
        }

        & .scroll {
            max-height: 400rpx;

            & .content {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 30rpx;
                padding: 20rpx 0;
            }
        }
    }
</style>